<template>
    <div class="file-add-wrap">
        <a-steps
        direction="vertical"
        :current="stepsCurrentValue"
        :items="stepsItems"
        style="--step-connector-length:40px;"
        size="small"
        ></a-steps>
        <div class="form-wrap">
            <div class="form-content">
                <component :is="currentStepItem?.formComponent" ref="fileFormRef" v-model="formData[currentStepItem?.formData]" @change="handleFormChange"></component>
            </div>
            <div class="bottom-button">
                <a-button  @click="handlePrevStep" :disabled="prevButtonDisabled">上一步</a-button>
                <a-button  @click.prevent="handleNextStep" :disabled="nextButtonDisabled">下一步</a-button>
                <a-button v-if ="stepsCurrentValue === stepsItems.length -1" type="primary" @click.prevent="handleSubmit">提交</a-button>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
    import { ref, computed, reactive } from 'vue';
    import { stepsCurrentValue, formData, stepsItems, currentStepItem } from './data';


    defineOptions({
        name: 'file-add', // 文件添加
    });

    // const stepsCurrentValue = ref(0);

    const prevButtonDisabled = computed(() => {
        return stepsCurrentValue.value <= 0;
    });
    const nextButtonDisabled = computed(() => {
        return stepsCurrentValue.value >= stepsItems.value.length -1;
    });

    const fileFormRef = ref();

    function handleFormChange(formData) {
        console.log('handleFormChange=>formData', formData);
        const  {fileCategory} = formData;
        console.log('handleFormChange=>fileCategory', fileCategory);
    }

    const handlePrevStep = () =>{
        if (stepsCurrentValue.value > 0) stepsCurrentValue.value --;
        console.log('formData=>', formData)
    }
    const handleNextStep = async() => {
        const results = await fileFormRef?.value?.validate();
        // console.log('handleNextStep=>results', results);
        // console.log('handleNextStep=>formData', formData);
        if (results?.valid) {
            // 表单校验通过
            const len = stepsItems.value.length;
            if (stepsCurrentValue.value < len-1) stepsCurrentValue.value ++;
        }
    }
    const handleSubmit = async() => {
        const results = await fileFormRef?.value?.validate();
        if (results?.valid) {
            console.log('handleSubmit=>formData', formData);
        }
    }

</script>

<style scoped lang="less">
    .file-add-wrap{
        display: grid;
        grid-template-columns: 1fr 6fr; /* 两列等宽 */
        gap: 10px; /* 间距 */
        position:relative;
        min-height: 100%;
        background-color: #f5f5f5;
        :deep(.ant-steps) {
            background-color: #fff;
            .ant-steps-item {
                min-height: 100px;
            }
        }
        .form-wrap {
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 100%;
            background-color: #fff;
            .form-content{
                flex: 1;
                overflow-x: hidden;
                overflow-y: auto;
            }
            .bottom-button{
                text-align: center;
                button{
                    margin: 0 10px;
                }
            }
        }
    }
</style>